<template>
    <div class="father">
        <div class="zong">
            <!-- logo -->
            <div class="logo">
                <div class="center_logo1">
                    RZF
                </div>
            </div>
            <div class="sou_zong">
                <div class="kuang">
                    <input type="text" placeholder="输入搜索关键词，如：“奔驰”" />
                </div>
                <div class="text"><span>搜索</span></div>
            </div>
            <!-- tel -->
            <div class="tel"><img src="./img/tel.png" alt="" />
                <div>028-87327655</div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
// logo
.logo {
    width: 280px;
    box-sizing: content-box;
}
.center_logo1 {
    text-align: center;
    width: 50px;
    height: 30px;
    line-height: 30px;
    margin-left: 30px;
    font-size: 25px;
    background-color: #db2534;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 5px;
    color: white;
    transform: skewX(-20deg);
    margin-left: 200px;
}

.father {
    width: 100%;
    height: 70px;
    position: relative;

    .zong {
        width: 1200px;
        height: 50px;
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

        .sou_zong {
            // border: 1px solid rgb(140, 159, 160);
            display: flex;
            margin-left: 20px;

            .kuang {
                width: 530px;

                input {
                    display: block;
                    width: 514px;
                    height: 36px;
                    padding-left: 8px;
                    padding-right: 96px;
                    // border: #ccc solid 2px;
                    border: #db2534 solid 2px;
                    border-right: none;

                    line-height: 36px;
                    outline: none;
                    border-radius: 7px;
                    // opacity: 0.7;
                }
            }

            .text {
                width: 90px;
                height: 40px;
                background-color: #db2534;
                color: #fff;
                text-align: center;
                font-size: 16px;
                line-height: 40px;
                border-radius: 0 7px 7px 0;
                cursor: pointer;
                z-index: 99;
            }
        }

    }

}

.tel {
    width: 280px;
    display: flex;
    margin-left: 50px;

    div {
        color: #db2534;
        font-weight: 700;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
    }
}
</style>